import React, { useEffect, useState } from 'react'
import axios from 'axios';
import { LeftOutline } from 'antd-mobile-icons';
import gift from "./img/gift.png";
import two from "./img/two-member.png";
import cart1 from "./img/new_shopCart1.png";
import "./index.scss"
import { useNavigate } from 'react-router-dom';
import { useParams } from 'react-router-dom';

const ListCom = (props) => {
    let type = true;
    let page = 1
    const params = useParams();

    let navigate = useNavigate();
    const [list, setList] = useState([])
    const [end, setEnd] = useState(false)
    useEffect(() => {
        moreData();
        //触底加载
        onScroll();
        return window.onscroll = undefined;
    }, [])

    const onScroll = () => {
        window.onscroll = () => {
            //获取滚动距离
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            //窗口的高度
            let windowHeight = document.documentElement.clientHeight;
            //滚动的高度
            let scrollHeight = document.body.scrollHeight;
            if (scrollHeight - scrollTop <= windowHeight) {
                if (type) {
                    page++;
                    moreData();
                }
                type = false
            }
        }
    }
    const moreData = () => {
        if (!end) {
            let searchKey = params.searchstr;
            axios.post('https://srv.hotkidceo.com/appapi/root-ceo-commodity/commodityApi/commoditySearch',
                {
                    "memberKey": "",
                    "searchKey": searchKey,
                    "isWholeSale": 0,
                    "channelId": "C06022632001",
                    "page": page
                }).then(res => {
                    console.log(res);
                    let data = res.data.data.templateList;
                    if (data.length !== 0) {
                        setList([...list, ...data])
                        type = true;
                    } else {
                        setEnd(true)

                    }

                })
        }
    }

    const goBack = () => {
        navigate(-1);
    }
    return (
        <div className="list_con">
            <div className="list_title"> <LeftOutline onClick={goBack} /> 列表页面</div>
            <ul>
                {
                    list.map((item, index) => <li key={index} className='con2'>

                        <div className='img'><img src={item.listImages} alt={item.listImages} /></div>
                        <div className='text'>
                            <div className='img1'>
                                <img src={gift} alt={gift} />
                            </div>
                            <div className="name"> {item.name}</div>
                            <div className='ccc'>{item.displayName}</div>
                            <div className='red'>
                                <span> ￥{item.retailPrice}</span>
                                <img src={cart1} alt={cart1} />
                            </div>
                            <div>
                                <span className='ccc'>￥{item.supplyPrice} </span>
                                <img src={two} alt={two} />
                            </div>
                        </div></li>)
                }
            </ul>
            {
                end ? <div>您的数据都加载完了，请不要再拉了...</div> : ""
            }
        </div>
    )
}

export default ListCom
